import React, { useEffect, useRef } from 'react';
import { connect, withRouter, useDispatch } from 'umi';
import { INIT_WEBSCENE } from '../constants/action-types';
// 头部组件
import Header from '@/components/content/Header';
import { useEffectOnce } from 'react-use';
import styles from './page_common.less';
import TopToolbar from '@/components/content/topToolbar';
import MainPage from '@/components/content/mainPage';
import ProjectList from '@/components/content/projectList';
import cls from 'classnames';
import { jsapi, viewUtils } from '@/utils/arcgis';
import request from '@/services/request';

// import echartLayer from '@/components/content/mainPage/chartLayer/echartLayer.js';
// import initEchartLayer from '@/components/content/mainPage/chartLayer/init.js';
// import ProjPage from '@/components/content/projectPage';
// import layerCreator from '@/utils/arcgis/layer/layer-creator';

async function addExtraLayer() {
  const [VectorTileLayer] = await jsapi.load(['esri/layers/VectorTileLayer']);

  var googleTileLayer = new VectorTileLayer({
    url: 'https://portal.wccg.tech:9002/to443/server1/rest/services/Hosted/ProvinceChina/VectorTileServer',
  });
  const view = await viewUtils.isViewReady();
  view.map.add(googleTileLayer);
}

const IndexPage = props => {
  const viewDiv = useRef(null);
  const dispatch = useDispatch();
  // 初始化地图
  useEffectOnce(() => {
    dispatch({
      type: INIT_WEBSCENE,
      payload: {
        container: viewDiv.current,
        basemapID: 'streets-night-vector',
        // basemapID: 'streets-night-vector',
      },
    });

    const url =
      'https://portal.wccg.tech:9002/to443/server1/rest/services/Hosted/%E5%AE%9C%E9%A9%AC%E9%A1%B9%E7%9B%AE%E4%B8%89%E5%9C%BA%E4%B8%B4%E5%BB%BA/SceneServer/layers/0/statistics/summary?f=json';
    const options = {
      method: 'GET',
    };

    request(url, options)
      .then(data => {
        return { data };
      })
      .catch(err => {});
    addExtraLayer();

    if (screen.width <= 1440) {
      const html = document.getElementsByTagName('html')[0];
      html.style.zoom = '74%';
    }
    // initEchartLayer();
  });

  return (
    <div className={styles.wrapper}>
      <Header />
      <TopToolbar />
      <ProjectList />
      <div className={cls(styles.viewContainer, 'view-container', 'main-page')}>
        <div ref={viewDiv} className={styles.viewDiv}>
          {/* todo 此处放置echarts 图层 */}
        </div>
      </div>
      {/* 主入口 */}
      <MainPage />
    </div>
  );
};

export default IndexPage;

// export default withRouter(
//   connect(({ app }) => {
//     return {
//       curProjId: app.curProjId,
//     };
//   })(IndexPage),
// );
